<template>
    <div class="attr-container">
        <p class="title">模板属性</p>
        <a-form-model style="padding: 20px;">
            <a-form-model-item v-for="(key, index) in Object.keys(options)" :key="index" :label="options[key]">
                <a-input type="color" v-if="isIncludesColor(key)" v-model="canvasStyleData[key]" show-alpha></a-input>
                <a-input v-else v-model.number="canvasStyleData[key]" type="number" />
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            options: {
              color: '颜色',
              opacity: '不透明度',
              backgroundColor: '背景色',
              fontSize: '字体大小',
            },
        }
    },
    computed: mapState([
        'canvasStyleData',
    ]),
    methods: {
        isIncludesColor(str) {
            return str.toLowerCase().includes('color')
        },
    },
}
</script>

<style lang="scss">
.attr-container {
    .title {
        text-align: center;
        margin-bottom: 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid #e4e7ed;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
    }
}
</style>
